<template>
  <div class="container">
    <div class="service grids gridColumns2">
      <div class="box" @click="toWebView(item.link)" v-for="(item, index) in infoService" :key="index">
        <div class="top" v-if="item.isSelected">
          <image src="@/static/top.jpg" mode="aspectFill" />
        </div>
        <div class="img">
          <image :src="item.cover" mode="widthFix" />
        </div>
        <div class="data">
          <div class="name fz12">{{item.title}}</div>
          <div class="relse fz12">
            <div class="form">{{form_format(item.form)}}</div>
            <div class="time">{{item.releaseDate}}</div>
          </div>
        </div>
        <div class="btn fz14">查看全文</div>
      </div>
    </div>

    <uv-load-more :status="status" />

    <uv-back-top :scroll-top="scrollTop"></uv-back-top>
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
const instance = getCurrentInstance();
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();

let infoService = ref([]);
let dicts = ref([]);
let params = ref({
  pageIndex: 1,
  pageSize: 50,
});
let totalData = 0;
let status = ref("loadmore");
let scrollTop = ref(0);

onReachBottom(() => {
  getMore();
});

onLoad(() => {
  getInfoService();
  getDict();
});

onPageScroll((e) => {
  scrollTop.value = e.scrollTop;
});

function getMore() {
  if (infoService.value.length >= totalData) return;
  params.value.pageIndex++;
  getInfoService();
}

async function getDict() {
  dicts.value = await proxy.$apis.getDict({
    type: "query",
    data: { code: "info_source" },
  });
}

function form_format(e) {
  let index = proxy.$utils.findIndexByField(dicts.value, "dict_code", e);
  if (index != -1) return dicts.value[index].dict_label;
}

async function getInfoService() {
  try {
    status.value = "loading";
    let { rows, total } = await proxy.$apis.realInfo({
      type: "list",
      data: params.value,
    });
    totalData = total;
    let arr = proxy.$utils.deepcopy(infoService.value);
    if (rows.length) {
      arr = proxy.$utils.filterArr(arr, rows, "_id");
    }
    infoService.value = arr;
  } catch (error) {
  } finally {
    status.value = "nomore";
  }
}

function toWebView(pageUrl) {
  let linkUrl = pageUrl.split("?");
  proxy.$utils.toLink(
    `/packagePages/currency/webView?url=${
      linkUrl[0]
    }&params=${encodeURIComponent(linkUrl[1])}`
  );
}
</script>



<style lang="scss" scoped>
.container {
  padding: 15px 10px;
  background-color: #f8f8f8;
}
.service {
  gap: 15px 13px; //上下间距 左右间距
  .box {
    background-color: white;
    border-radius: 5px 5px 10px 10px;
    box-shadow: 2px 5px 5px 2px #e2e2e2;
    overflow: hidden;
    position: relative;
    .top {
      position: absolute;
      top: 0;
      right: 0;
      width: 70px;
      height: 70px;
      z-index: 1;
      image {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    .data {
      border-radius: 0 0 10px 10px;
      padding: 10px;
      .name {
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        word-break: break-all;
        min-height: 34px;
      }
      .relse {
        padding-top: 5px;
        .form {
          color: #349ad6;
          padding-bottom: 3px;
        }
      }
    }
    .btn {
      width: 90%;
      margin: 0 auto 10px;
    }
  }
}
.btn {
  background-color: #4196a2;
  border-radius: 25px;
  margin-top: 10px;
  text-align: center;
  color: white;
  line-height: 28px;
  cursor: pointer;
}
</style>



